<template>
    <div class="app-container">
      <el-row :gutter="20" class="app-row">
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">资源数量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">有增长资源：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">来源单位数量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">总数据量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">昨日新增数据量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">近7日新增数据量：100</el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="app-row">
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">近30日数据增量（1000）</div>
            </template>
            <div class="app-chart" ref="chartLineDataNum"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">各来源单位数据量</div>
            </template>
            <div class="app-chart" ref="chartBarSrcDept"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">数据量TOP10</div>
            </template>
            <div class="app-chart" ref="chartBarDataNumTop10"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="app-row">
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">接口数量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">有使用接口：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">调用单位数量：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">总调用次数：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">昨日调用次数：100</el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="app-card" @click="viewDataList()" shadow="hover">近7日调用次数：100</el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="app-row">
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">近30日调用次数（1000）</div>
            </template>
            <div class="app-chart" ref="chartLineCallNum"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">各单位调用次数</div>
            </template>
            <div class="app-chart" ref="chartBarDeptCallNum"></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="app-chart-container">
            <template #header>
              <div style="text-align: center;">调用次数TOP10</div>
            </template>
            <div class="app-chart" ref="chartBarCallNumTop10"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chartLineDataNum = ref<HTMLDivElement | null>(null);
const chartBarSrcDept = ref<HTMLDivElement | null>(null);
const chartBarDataNumTop10 = ref<HTMLDivElement | null>(null);
const chartLineCallNum = ref<HTMLDivElement | null>(null);
const chartBarDeptCallNum = ref<HTMLDivElement | null>(null);
const chartBarCallNumTop10 = ref<HTMLDivElement | null>(null);

const initChart = () => {
  if (chartLineDataNum.value) {
    const chartLineDataNumInstance = echarts.init(chartLineDataNum.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartLineDataNumInstance.setOption(option);
  }

  if (chartBarSrcDept.value) {
    const chartBarSrcDeptInstance = echarts.init(chartBarSrcDept.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartBarSrcDeptInstance.setOption(option);
  }

  if (chartBarDataNumTop10.value) {
    const chartBarDataNumTop10Instance = echarts.init(chartBarDataNumTop10.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartBarDataNumTop10Instance.setOption(option);
  }


  if (chartLineCallNum.value) {
    const chartLineCallNumInstance = echarts.init(chartLineCallNum.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'line',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartLineCallNumInstance.setOption(option);
  }

  if (chartBarDeptCallNum.value) {
    const chartBarDeptCallNumInstance = echarts.init(chartBarDeptCallNum.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartBarDeptCallNumInstance.setOption(option);
  }

  if (chartBarCallNumTop10.value) {
    const chartBarCallNumTop10Instance = echarts.init(chartBarCallNumTop10.value);
    const option = {
      grid: {
        left: 40,
        right: 10,
        top: 20,
        bottom: 40
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '数据量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        areaStyle: {}
      }]
    };
    chartBarCallNumTop10Instance.setOption(option);
  }
};

const viewDataList = () => {
    window.open('./list')
}

onMounted(() => {
  initChart();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
  .app-row {
    margin-bottom: 20px;
  }
  .app-card {
    &:hover {
        text-decoration: underline;
        cursor: pointer;
    }
  }
  .app-chart-container {
    --el-card-padding: 8px;
    .app-chart {
        width: 100%;
        height: 260px;
      }
  }
}
</style>
